<template>
  <FadeAnimation>
    <div ref="container"
         v-show="show"
         :style="containerStyle"
         :class="[us.e('popup-search')]">

      <CommonLayout>
        <template #header>
          <div :class="[us.e('popup-search-input-wrapper')]">
            <van-field :class="[us.e('popup-search-input')]"
                       left-icon="search" ref="refSearchField" autofocus
                       v-model="searchValue" placeholder="请输入用户名"/>
            <a @click="hide"
               :class="[us.e('popup-search-input-button')]"
               type="primary">
              取消
            </a>
          </div>
        </template>

        <div>1</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
        <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
      </CommonLayout>



      <div>
        {{ searchValue }}
      </div>
    </div>
  </FadeAnimation>
</template>
<script lang="ts" setup>
import {debounceRef, useNamespace} from '@utils';
import {computed, nextTick, shallowRef} from 'vue';
import {RefreshListConfig} from "@hhd/plat/RefreshList/RefreshListType";

const show = shallowRef(false);
const us = useNamespace('refresh-list');
const container = shallowRef();
const refSearchField = shallowRef();
defineOptions({
  name: 'PopupSearch'
});
const width = shallowRef(50);
const searchValue = debounceRef(undefined, 500);

type SearchConfig = {
  config: RefreshListConfig;
  slots: any
}

function hide() {
  show.value = false;
}

function search(searchConfig: SearchConfig) {
  searchValue.value = undefined;
  show.value = true;
  nextTick(() => {
    refSearchField.value.focus();
  })
}

const containerStyle = computed(() => {
  return {}
})

defineExpose({
  search
})

</script>